import {Button, Dropdown, Flex, message, Select, Space} from 'antd';
import {OpenAIOutlined, ShoppingCartOutlined} from '@ant-design/icons'
import './index.less'
import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";


const MyHeader = () => {
    const navigate = useNavigate()
    const logout = () => {
        window.localStorage.removeItem('token')
        navigate('/')
    }

    const items = [
        {
            key: '1',
            label: (
                <a onClick={logout} target="_blank" rel="noopener noreferrer">
                    退出登录
                </a>
            ),
        },
    ];


    useEffect(() => {
        let gpt = window.localStorage.getItem('gpt')
        if (!gpt) {
            setSelectedGpt('chatglm_pro')
            window.localStorage.setItem('gpt', 'chatglm_pro')
        } else {
            console.log('gpt')
            setSelectedGpt(gpt)
        }

    });

    const [selectedGpt, setSelectedGpt] = useState('gpt-3.5-turbo')


    const gptOptions = [
        {value: 'gpt-3.5-turbo', label: 'gpt-3.5-turbo'},
        {value: 'gpt-3.5-turbo-16k', label: 'gpt-3.5-turbo-16k'},
        {value: 'gpt-4', label: 'gpt-4'},
        {value: 'gpt-4-32k', label: 'gpt-4-32k'},
        {value: 'chatGLM_6b_SSE', label: 'chatGLM_6b_SSE'},
        {value: 'chatglm_lite', label: 'chatglm_lite'},
        {value: 'chatglm_std', label: 'chatglm_std'},
        {value: 'chatglm_pro', label: 'chatglm_pro'},
        {value: 'chatglm_lite_32k', label: 'chatglm_lite_32k'},
    ]

    // 选择gpt模型
    const changeGpt = (e) => {
        console.log(e)
        window.localStorage.setItem('gpt', e)
        setSelectedGpt(e)
        message.success('切换成功👻').then(r => null)
    }

    // 跳转支付页
    const goPayMent = () => {
        navigate('/workplace/payment')
    }

    return (
        <>
            <Flex justify={'space-between'} align={"center"} style={{height: '100%'}}>
                {/*这里可以设置网站标题*/}
                <div className={'websiteTitle'}>
                    FusionMind
                </div>
                <Space size={"middle"}>
                    <Button onClick={goPayMent} type="primary" icon={<ShoppingCartOutlined style={{fontSize: 20}}/>}/>


                    <Select
                        defaultValue={selectedGpt}
                        value={selectedGpt}
                        style={{
                            width: 160,
                        }}
                        onChange={changeGpt}
                        options={gptOptions}
                    />
                    <Dropdown
                        menu={{
                            items,
                        }}
                    >
                        <OpenAIOutlined style={{fontSize: 40}}/>
                    </Dropdown>
                </Space>
            </Flex>

        </>
    )
}

export default MyHeader
